<template>
    <div>
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>请假中心</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="margin-top: 10px;"><el-button type="primary" @click="showdal = true" :disabled="noleave.length!=0">我要请假</el-button></div>
        <div>
            <p>等待审批：</p>
            <div class="scrollbar-demo-item important" v-for="(item, i) in noleave" :key="i">
                <div class="edititem">{{ item.create_time }}</div>
                <div class="edititem">{{ item.reson }}</div>
            </div>
        </div>
        <div style="margin-top: 20px;">
            <el-badge value="10" class="item">
                <el-button>请假记录</el-button>
            </el-badge>
            <el-scrollbar height="180px">
                <div class="scrollbar-demo-item" v-for="(item, i) in leavelist" :key="i">
                    <div class="edititem">{{ item.create_time }}</div>
                    <div class="edititem">{{ item.reson }}</div>
                    <div class="edititem">
                        <el-tag type="primary" size="large" v-if="item.isleave == 1">通过</el-tag>
                        <el-tag type="danger" size="large" v-if="item.isleave == 2">拒绝</el-tag>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </div>
    <el-dialog v-model="showdal" title="请假" width="500" :before-close="closedal">
        <el-form :model="leaveinfo" label-width="auto" style="max-width: 600px" ref="leaveref">
            <el-form-item label="原因">
                <el-input v-model="leaveinfo.reson" />
            </el-form-item>
            <el-form-item label="位置">
                <el-input v-model="leaveinfo.postion" />
            </el-form-item>
            <el-form-item label="结束时间">
                <el-col :span="11">
                    <el-date-picker v-model="leaveinfo.end_time" type="date" placeholder="Pick a date"
                        style="width: 100%" />
                </el-col>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="leaveinfo.phone" />
            </el-form-item>
            <el-form-item label="紧急联系人">
                <el-input v-model="leaveinfo.person" />
            </el-form-item>
            <el-form-item label="紧急联系人电话">
                <el-input v-model="leaveinfo.phones" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="closedal">取消</el-button>
                <el-button type="primary" @click="queryleave">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { getstuleave, stuleave } from '@/apis/leave';
import { ElMessage } from 'element-plus';
// @ts-ignore
import { Userstore } from '@/stores/user.js';
const showdal = ref(false)
const leaveref = ref<any>(null)
const leaveinfo = ref({
    reson: '',
    end_time: '',
    postion: '',
    phone: '',
    person: '',
    phones: ''
})
const userstore = Userstore()
const leavelist = ref<any>([])
const noleave = ref<any>([])
const getleavelist = async () => {
    const res = await getstuleave({ studentid: userstore.userinfo.stuid })
    leavelist.value = res.data.leave.filter((item: any) => item.isleave != 0)
    noleave.value = res.data.leave.filter((item: any) => item.isleave == 0)
}
const closedal = () => {
    showdal.value = false
    leaveinfo.value={
    reson: '',
    end_time: '',
    postion: '',
    phone: '',
    person: '',
    phones: ''
    }
}
const queryleave =async()=>{
   const res = await stuleave({...leaveinfo.value,studentid:userstore.userinfo.stuid,teacherid:userstore.userinfo.tecid})
   if(res.data.status!=200) return ElMessage({type:'error',message:'请假失败'})
   closedal()
   getleavelist()
}
onMounted(() => {
    getleavelist()
})
</script>
<style lang='scss' scoped>
.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

.important {
    color: red;
}

.edititem {
    width: 50%;
    height: 100%;
    line-height: 40px;
    text-align: center;
}
</style>